<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/css/elementui/index.css">
<link rel="stylesheet" href="/css/exam/css/style.css">
<link rel="stylesheet" href="/iconfont/iconfont.css">
<script src="/css/exam/js/httpVueLoader.js"></script>
</head>
<body>
<div id="app">
  <div class="p-30">
    <!-- <div><navcon><navcon/></div> -->
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-row>
        <el-button type="primary"><a href="{{route('admin.examview.addexam')}}" style="display:block;color:#fff;text-decoration:none">新&ensp;&ensp;建</a></el-button>
        <el-button type="primary"><a href="{{route('admin.examview.papercidlist')}}" style="display:block;color:#fff;text-decoration:none">分类管理</a></el-button>
      </el-row>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="试卷标题">
          <el-input v-model="formInline.title" placeholder="试卷标题"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="formInline.id" placeholder="请选择分类">
            <el-option v-for="(item, index) in cidData" :key="index" :label="item.p_name" :value="item.id">
            </el-option>
          </el-select> 
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="searchput">查&ensp;&ensp;询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <template>
        <el-table  :data="examData"  border  style="width: 100%" v-loading="loading">   
            <el-table-column fixed prop="id"  label="ID"  width="12"   v-if="false"> </el-table-column>
            <el-table-column prop="category.p_name" label="分&ensp;&ensp;类" width="200"> </el-table-column>
            <el-table-column prop="title" label="标&ensp;&ensp;题" width=""> </el-table-column>
            <el-table-column prop="score" label="总&ensp;&ensp;分" width="100"> </el-table-column>
            <el-table-column prop="pass_score" label="及格分数" width="100"> </el-table-column>
            <el-table-column prop="exam_duration" label="时&ensp;&ensp;长" sortable width="100"> </el-table-column>
            <el-table-column fixed="right"  label="操&ensp;&ensp;作"  width="380">
            <template slot-scope="scope">			
			    <el-button size="mini"  type="primary"><a style="color:#fff" :href="'/admin/examview/question?id=' + scope.row.id">组&ensp;&ensp;卷</a></el-button>
                <el-button size="mini"  type="primary" @click="handleEdit(scope.$index,scope.row)" >
                   编&ensp;&ensp;辑 
                </el-button>
				<el-button size="mini"  type="primary"><a  style="color:#fff" :href="'/admin/examview/userpaper?id=' + scope.row.id">考试记录</a></el-button>
                <el-button  size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)"  type="text" >删&ensp;&ensp;除</el-button>
                      <!--编辑弹窗-->
                      <el-dialog
                      title="提&ensp;&ensp;示"
                      :visible.sync="dialogVisible"
                      width="50%"
                      :append-to-body="true"
                      >
                          <el-form :model="editExamForm" :rules="rules" ref="editExamForm" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="ID" prop="id"  v-if="false">
                                    <el-input v-model="editExamForm.id"></el-input>
                                </el-form-item>
                                <el-form-item label="试卷名" prop="title">
                                    <el-input v-model="editExamForm.title"></el-input>
                                </el-form-item>
                                <el-form-item label="分&ensp;&ensp;类" prop="cid">
                                    <el-select v-model="editExamForm.cid" placeholder="请选择分类">
                                        <el-option
                                                v-for="item in cidData"
                                                :key="item.id"
                                                :label="item.p_name"
                                                :value="item.id"
                                            >
                                        </el-option>
                                    </el-select> 
                                </el-form-item>
                                <el-form-item label="总&ensp;&ensp;分" prop="score">
                                  <el-input v-model="editExamForm.score"></el-input>
                                </el-form-item>
                                <el-form-item label="及格分" prop="pass_score">
                                    <el-input v-model="editExamForm.pass_score"></el-input>
                                </el-form-item>
                                <el-form-item label="时&ensp;&ensp;间" prop="exam_duration">
                                    <el-input v-model="editExamForm.exam_duration"></el-input>
                                </el-form-item>
                                <el-form-item label="考试次数" prop="exam_num">
                                    <el-input v-model="editExamForm.exam_num"></el-input>
                                </el-form-item> 
                                <el-row  style="text-align:center">
                                    <el-button @click="handleSet(scope.$index, scope.row)" type="primary">保&ensp;&ensp;存</el-button>
                                    <el-button @click="dialogVisible = false">取&ensp;&ensp;消</el-button>
                                </el-row>         
                            </el-form>
                    </el-dialog>
            </template>
            </el-table-column>
        </el-table><br>
        <!-- 分页组件 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10,20,50,100]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="count">
            </el-pagination>
        </div>
    </template>


  </div>

</div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>

const app = new Vue({
  el: '#app',
  components:{
			'navcon':httpVueLoader('/css/exam/components/navcon.vue'),
		},
  data() {
    return { 
      loading: false,
      examData: [], //试卷数据
      cidData: [], //分类数据
      currentPage: 1, // 当前页码
      count: 10, // 总条数
      pageSize: 10,// 每页的数据条数
      formInline:{
        title:null,
        id:null,
      },
      dialogVisible: false,

      editExamForm: {
        id:'',
        title: '',
        cid: '',
        pass_score: '',
        score: '',
        exam_duration: '',
        exam_num: '',
      },

      
      rules: {
          title: [
            { required: true, message: '请输入试卷标题', trigger: 'blur' },
            { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
          ],

          pass_score: [
            { required: true, message: '请输入及格分', trigger: 'blur' },
            { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' }
          ],
          score: [
            { required: true, message: '请输入及格分', trigger: 'blur' },
            { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' }
          ],
          exam_duration: [
            { required: true, message: '单位：分钟', trigger: 'blur' },
            { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' }
          ],
          exam_num: [
            { required: true, message: '请输入整数', trigger: 'blur' },
            { pattern: /^[0-9]*$/, message: '请输入整数', trigger: 'blur' }
          ]
        },
    }
  },
  created() {
    this.getdata(),
    this.getciddata()
  },

  methods: {
          // // 带参数跳转考试记录页面
          // handleClick(row) {
          // window.open("{{ route('admin.examview.userpaper') }}?id="+ row.id, '_parent')
          // },
          // // 带参数跳转组卷页面
          // handleClick2(row) {
          // window.open("{{ route('admin.examview.question') }}?id="+ row.id, '_parent')
          // },
         // 删除列表行
          deleteRow(index, rows) { 
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                   
                })
                .then(() => {                  
                  axios.post('/admin/paper/del',{id:rows.id})
                    .then(response =>{
                      this.getdata()                      
                    }).catch(error =>{
                        console.log('请求失败：' + error);
                    })
                })
          },
          getdata() {    
            this.loading = true   
            axios.post('/admin/paper/index',{limit: this.pageSize, page: this.currentPage,title:this.formInline.title,cid:this.formInline.id})
            .then(response =>{
                console.log('请求成功：',response.data.data);
                this.examData = response.data.data;
                this.count = response.data.count; 
                this.loading = false; 
            }).catch(error =>{
                console.log('请求失败：' + error);
                this.loading = false; 
            })
          }, 

          // 搜索事件         
          searchput(){
            this.currentPage = 1;
            this.getdata() 
          }, 
          //分类列表        
          getciddata() {           
            axios.get('/admin/paper/category_index?limit=' + 100)
            .then(response =>{
                this.cidData = response.data.data;  
                console.log('...' + response.data.data);             
            }).catch(error =>{
                console.log('请求失败：' + error);
            })
          }, 
          // 分页页码  
          handleSizeChange(val){
            console.log(`每页 ${val} 条`);
				    this.currentPage = 1;
				    this.pageSize = val;
            this.getdata()
          },
          handleCurrentChange(val){
            console.log(`当前页: ${val}`);
				    this.currentPage = val;
            this.getdata()
					  
          },
          // 编辑、增加页面保存方法
          handleEdit (index, row) { 
              this.dialogVisible = true//开启弹出层
              this.editExamForm.id = row.id
              this.editExamForm.title = row.title
              this.editExamForm.cid = row.cid
              this.editExamForm.score = row.score
              this.editExamForm.pass_score = row.pass_score
              this.editExamForm.exam_duration = row.exam_duration
              this.editExamForm.exam_num = row.exam_num 
            },
          handleSet (index, row) {
            let id = this.editExamForm.id;
            let title = this.editExamForm.title;
            let cid = this.editExamForm.cid;
            let pass_score = this.editExamForm.pass_score;
            let score = this.editExamForm.score;
            let exam_duration = this.editExamForm.exam_duration;
            let exam_num = this.editExamForm.exam_num;
            axios.post('/admin/paper/edit',
                  {id:id,title:title,cid:cid,pass_score:pass_score,exam_duration:exam_duration,exam_num:exam_num,score:score}
                  )
                  .then(res => {
                  if (res.data.code == 0) {                             
                     this.$message.success("修改成功！");
                    this.dialogVisible = false;
                    this.getdata()
                    //window.location.reload();
                  } else {
                    this.$message.info("修改失败！")
                  }
              })         
            }, 
    },

  })

</script>
<style>
    a{color:#409EFF;text-decoration: none;}
</style>
</html>

